<template>
    <div class="goodsMsg">
        <div class="goodsItem">
            <div class="information">
                <div class="avatar">
                    <img src="../../assets/managaImg.png"/>
                </div>
                <div class="msg">
                    <div class="name">产品名称</div>
                    <div class="price">￥12.00</div>
                    <div class="describe">
                        <div class="describeItem">
                            <span class="title">总销量</span>
                            <span>0</span>
                        </div>
                        <div class="describeItem">
                            <span class="title">库存</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="describe">
                        <div class="describeItem">
                            <span class="title">退款数</span>
                            <span>0</span>
                        </div>
                        <div class="describeItem">
                            <span class="title">上架时间</span>
                            <span>2020-05-20</span>
                        </div>
                    </div>
                    <span class="img">
                        <img src="../../assets/goodsEdit.png"/>
                    </span>
                </div>
            </div>
            <div class="btnList">
                <div class="btnItem" @click="preview">
                    <img src="../../assets/goodsMsg/review@2x.png"/>
                    <div class="word">预览</div>
                </div>
                <div class="btnItem">
                    <img src="../../assets/goodsMsg/shuju@2x.png"/>
                    <div class="word">数据</div>
                </div>
                <div class="btnItem">
                    <img src="../../assets/goodsMsg/iconfontevaluate@2x.png"/>
                    <div class="word">评价</div>
                </div>
                <div class="btnItem">
                    <img src="../../assets/goodsMsg/iconfontzhizuobiaozhun023130@2x.png"/>
                    <div class="word">分享</div>
                </div>
                <div class="btnItem">
                    <img src="../../assets/goodsMsg/tuiguangdingdan@2x.png"/>
                    <div class="word">推广</div>
                </div>
            </div>
        </div>
        <div class="goodsItem">
            <div class="information">
                <div class="avatar">
                    <img src="../../assets/managaImg.png"/>
                </div>
                <div class="msg">
                    <div class="name">产品名称</div>
                    <div class="price">￥12.00</div>
                    <div class="describe">
                        <div class="describeItem">
                            <span class="title">总销量</span>
                            <span>0</span>
                        </div>
                        <div class="describeItem">
                            <span class="title">库存</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="describe">
                        <div class="describeItem">
                            <span class="title">退款数</span>
                            <span>0</span>
                        </div>
                        <div class="describeItem">
                            <span class="title">上架时间</span>
                            <span>2020-05-20</span>
                        </div>
                    </div>
                    <span class="img">
                        <img src="../../assets/goodsEdit.png"/>
                    </span>
                </div>
            </div>
            <div class="btnList">
                <div class="btnItem">
                    <img src="../../assets/goodsMsg/review@2x.png"/>
                    <div class="word">预览</div>
                </div>
                <div class="btnItem">
                    <img src="../../assets/goodsMsg/shuju@2x.png"/>
                    <div class="word">数据</div>
                </div>
                <div class="btnItem">
                    <img src="../../assets/goodsMsg/iconfontevaluate@2x.png"/>
                    <div class="word">评价</div>
                </div>
                <div class="btnItem">
                    <img src="../../assets/goodsMsg/iconfontzhizuobiaozhun023130@2x.png"/>
                    <div class="word">分享</div>
                </div>
                <div class="btnItem">
                    <img src="../../assets/goodsMsg/tuiguangdingdan@2x.png"/>
                    <div class="word">推广</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name : "goodsMsg",
        data(){
            return{
                imgs:[
                    require('@/assets/managaImg.png')
                ]
            }
        },
        methods:{
            preview(){
                this.$createImagePreview({
                    imgs: this.imgs
                }).show()
            }
        }
    }
</script>

<style scoped lang="stylus">
.goodsMsg
    .goodsItem
        margin-top 0.27rem
        background-color  #fff
        .information
            display flex
            padding 0.40rem 0 0.40rem 0.48rem
            border 0.03rem solid #EEEEEE
            .avatar
                img
                    width 2.19rem
                    height 2.19rem
            .msg
                color #333333
                font-size 0.35rem
                margin-left 0.29rem
                position relative
                .img
                    position absolute
                    top 0.89rem
                    right 0.40rem
                    img
                        width 0.40rem
                        height 0.40rem
                .price
                    color #00A398
                    font-size 0.43rem
                    margin-top 0.25rem
                .describe
                    display flex
                    width 6.62rem
                    justify-content space-between
                    .describeItem
                        width 3.5rem
                        white-space nowrap
                        margin-top 0.22rem
                        .title
                            color #999999
                            font-size 0.29rem
                            padding-right 0.13rem
    .btnList
        padding 0.32rem 0.95rem
        background-color  #fff
        display flex
        justify-content space-between
        align-items center
        .btnItem
            img
                width 0.61rem
                height 0.61rem
            .word
                color #666666
                font-size 0.29rem
</style>